<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Star Admin Free Bootstrap Admin Dashboard Template</title>
  <!-- plugins:css -->
  <link rel="stylesheet" href="../../../static/vendors/iconfonts/mdi/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="../../../static/vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="../../../static/vendors/css/vendor.bundle.addons.css">
  <!-- endinject -->
  <!-- plugin css for this page -->
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="../../../static/css/style.css">
  <!-- endinject -->
  <link rel="shortcut icon" href="../../../static/images/favicon.png" />
</head>

<body>
  <div class="container-scroller">
    <div class="container-fluid page-body-wrapper full-page-wrapper auth-page">
      <div class="content-wrapper d-flex align-items-center auth auth-bg-1 theme-one">
        <div class="row w-100">
          <div class="col-lg-4 mx-auto">
            <div class="auto-form-wrapper">
              <form id="log-form" action="#">
                <div class="form-group">
                  <label class="label">Telephone</label>
                  <div class="input-group">
                    <input type="text" name="telephone" class="form-control" placeholder="Telephone">
                    <div class="input-group-append">
                      <span class="input-group-text">
                        <i class="mdi mdi-check-circle-outline"></i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="label">Password</label>
                  <div class="input-group">
                    <input type="password" name="password" class="form-control" placeholder="*********">
                    <div class="input-group-append">
                      <span class="input-group-text">
                        <i class="mdi mdi-check-circle-outline"></i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <button id="log-btn" class="btn btn-primary submit-btn btn-block">Login</button>
                </div>
                <div class="form-group d-flex justify-content-between">
                  <div class="form-check form-check-flat mt-0">
                    <label class="form-check-label">
                      <input type="checkbox" class="form-check-input" checked> Keep me signed in
                    </label>
                  </div>
                  <a href="#" class="text-small forgot-password text-black">Forgot Password</a>
                </div>
                
                <div class="text-block text-center my-3">
                  <span class="text-small font-weight-semibold">Not a member ?</span>
                  <a href="register.html" class="text-black text-small">Create new account</a>
                </div>
              </form>
            </div>
            <ul class="auth-footer">
              <li>
                <a href="#">Conditions</a>
              </li>
              <li>
                <a href="#">Help</a>
              </li>
              <li>
                <a href="#">Terms</a>
              </li>
            </ul>
            <p class="footer-text text-center">copyright © 2018 Bootstrapdash. All rights reserved.</p>
          </div>
        </div>
      </div>
      <!-- content-wrapper ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="../../../static/vendors/js/vendor.bundle.base.js"></script>
  <script src="../../../static/vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- inject:js -->
  <script src="../../../static/js/off-canvas.js"></script>
  <script src="../../../static/js/misc.js"></script>
  <!-- endinject -->
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
</body>
<script type="text/javascript">
$(function(){

    var base = "http://localhost:8080"

    $("#log-form").validate({
        rules: {
            telephone: {
                required: true,
                rangelength: [11,11]
            },
            password: {
                required: true,
                rangelength: [6,10]
            }
        },
        messages: {
            telephone: {
                required: "手机号不能为空",
                rangelength: "手机号不合法",
            },
            password: {
                required: "密码必填",
                rangelength: "密码长度必须为6-10位"
            }
        }
    });

    $("#log-btn").click(function(){
        $.post(
            base + "/user/launcher",
            $("#log-form").serialize(),
            function (data, status) {
                if (data.status = "success") {
                    alert("登录成功")
                    window.location.href = "../../../static/index.html"
                }
                else {
                    alert("登录失败")
                }
            }
        )
    })

})

</script>
</html>